// dynamicAnemone.js 动态摆动海葵
// 实现：贝塞尔曲线
// ctx.quadraticCurveTo(cpx,cpy,x,y)
// cpx：贝塞尔控制点的 x 坐标
// cpy：贝塞尔控制点的 y 坐标
// x：结束点的 x 坐标
// y：结束点的 y 坐标

// 构造函数AneMone
var AneMone=function(){
	// 起点坐标x（即控制点）
	this.controlPointX=[];
	// 终点坐标
	this.destinationX=[];
	this.destinationY=[];
	// 摆动的幅度
	this.range=[];
	// 微小的变化值
	this.tiny=0;
}
// 添加海葵数量属性num=50
AneMone.prototype.num=50;
// init函数，初始化海葵对象
AneMone.prototype.init=function(){
	// 循环遍历初始化每一条海葵
	for(var i=0;i<this.num;i++){
		// 初始化起点坐标x（即控制点）
		this.controlPointX[i]=i*16+Math.random()*20;
		// 初始化终点坐标
		this.destinationX[i]=this.controlPointX[i];
		this.destinationY[i]=canHeight-250+Math.random()*50;
		// 初始化摆动幅度
		this.range[i]=20+Math.random()*100;
	}
}
// draw函数，绘制海葵对象
AneMone.prototype.draw=function(){
	// 保存画笔2状态
	ctx2.save();
	// 设置画笔2样式 设置宽度 圆角 透明度 颜色
	ctx2.strokeStyle="#3b154e";
	ctx2.lineWidth=20;
	ctx2.lineCap="round";
	ctx2.globalAlpha=0.5;
	// 设置海葵的动态摆动，使用微小值，并通过sin返回-1~1的数值
	this.tiny+=0.00008*100;
	var sinResult=Math.sin(this.tiny);
	// 循环遍历绘制每一条海葵
	for(var i=0;i<this.num;i++){
		// 开始一条新路径
		ctx2.beginPath();
		// 微小的改变终点的坐标点
		this.destinationX[i]=this.controlPointX[i]+sinResult*this.range[i];
		// 移动到起点坐标
		ctx2.moveTo(this.controlPointX[i],canHeight);
		// 绘制一条贝塞尔曲线
		ctx2.quadraticCurveTo(
			// 控制点
			this.controlPointX[i],canHeight-100,
			// 终点
			this.destinationX[i],this.destinationY[i]
		);
		// 绘制
		ctx2.stroke();
	}
	// 恢复画笔2状态
	ctx2.restore();
}
